<template>
  <div class="login-container">
    <!-- 动态背景 -->
    <div class="background-animation">
      <div class="bubble" v-for="i in 15" :key="i"></div>
      <div class="floating-element element-1"></div>
      <div class="floating-element element-2"></div>
      <div class="floating-element element-3"></div>
    </div>

    <div class="login-form">
      <h2 class="login-title">元气陪玩</h2>
      <p class="login-subtitle">后台管理系统</p>
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        class="form-content"
      >
        <el-form-item prop="userPhone">
          <el-input
            v-model="loginForm.userPhone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-mobile"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="userPassword">
          <el-input
            v-model="loginForm.userPassword"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleLogin"
            :loading="loading"
            class="login-button"
            style="width: 100%"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      loginForm: {
        tenantId: "1",
        userPhone: "",
        userPassword: "",
      },
      loginRules: {
        userPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 50, message: "密码长度为6-20位", trigger: "blur" },
        ],
      },
      loading: false,
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    async handleLogin() {
      this.loading = true;
      let resp = await this.customerServiceApi.roleLogin(this.loginForm);
      if (resp.code == 200) {
        this.$store.commit('setUser',resp.data)  // 存储用户信息包括token和role等
        this.loading = false; 
        const userRole = resp.data.userRole;  // 获取用户角色
        switch (userRole){
          case 0: // 管理员
            this.$router.push("/admin/accompanyingManagement");
            break;
          case 1: // 客服
            this.$router.push("/customerService/bossList");
            break;
          case 3: // 财务
            this.$router.push("/finance/findBoss");
            break;
          default: 
          this.$message.error("无权限登录");     
        }
      } else {
        this.$message.error(resp.message);
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 动态背景样式 */
.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  z-index: -2;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 气泡动画 */
.bubble {
  position: absolute;
  bottom: -50px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: bubble 15s infinite ease-in;
}

.bubble:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  width: 20px;
  height: 20px;
}
.bubble:nth-child(2) {
  left: 20%;
  animation-delay: 1s;
  width: 15px;
  height: 15px;
}
.bubble:nth-child(3) {
  left: 30%;
  animation-delay: 3s;
  width: 30px;
  height: 30px;
}
.bubble:nth-child(4) {
  left: 40%;
  animation-delay: 5s;
  width: 10px;
  height: 10px;
}
.bubble:nth-child(5) {
  left: 50%;
  animation-delay: 2s;
  width: 25px;
  height: 25px;
}
.bubble:nth-child(6) {
  left: 60%;
  animation-delay: 7s;
  width: 18px;
  height: 18px;
}
.bubble:nth-child(7) {
  left: 70%;
  animation-delay: 4s;
  width: 22px;
  height: 22px;
}
.bubble:nth-child(8) {
  left: 80%;
  animation-delay: 6s;
  width: 13px;
  height: 13px;
}
.bubble:nth-child(9) {
  left: 90%;
  animation-delay: 9s;
  width: 27px;
  height: 27px;
}
.bubble:nth-child(10) {
  left: 15%;
  animation-delay: 10s;
  width: 17px;
  height: 17px;
}
.bubble:nth-child(11) {
  left: 25%;
  animation-delay: 12s;
  width: 24px;
  height: 24px;
}
.bubble:nth-child(12) {
  left: 35%;
  animation-delay: 11s;
  width: 19px;
  height: 19px;
}
.bubble:nth-child(13) {
  left: 55%;
  animation-delay: 13s;
  width: 12px;
  height: 12px;
}
.bubble:nth-child(14) {
  left: 65%;
  animation-delay: 8s;
  width: 26px;
  height: 26px;
}
.bubble:nth-child(15) {
  left: 75%;
  animation-delay: 14s;
  width: 16px;
  height: 16px;
}

@keyframes bubble {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 浮动元素 */
.floating-element {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: float 8s infinite ease-in-out;
}

.element-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.element-2 {
  width: 50px;
  height: 50px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.element-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  right: 25%;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, 20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 40px) rotate(180deg);
  }
  75% {
    transform: translate(-20px, 20px) rotate(270deg);
  }
}

.login-form {
  width: 400px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 1;
}

.login-title {
  text-align: center;
  margin-bottom: 10px;
  color: #333;
  font-size: 28px;
  font-weight: bold;
}

.login-subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
  font-size: 14px;
}

.form-content {
  margin-bottom: 20px;
}

.login-button {
  margin-top: 10px;
  background: linear-gradient(to right, #667eea, #764ba2);
  border: none;
}

.register-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.register-text {
  color: #667eea;
  cursor: pointer;
  font-weight: bold;
}

.register-text:hover {
  text-decoration: underline;
}
</style>
